<template>
    <div>
         <div class="reg"><h2>注册</h2></div>
                <van-form @submit="onSubmit">
                <van-field
                    v-model="username"
                    name="username"
                    label="账号"
                    placeholder="账号"
                    :rules="rules.username"
                />
                <van-field
                    v-model="password"
                    type="password"
                    name="password"
                    label="密码"
                    placeholder="密码"
                    :rules="rules.password"
                />
                <van-field
                    v-model="repass"
                    type="password"
                    name="repass"
                    label="确认密码"
                    placeholder="确认密码"
                    :rules="rules.repass"
                />
                <van-field
                    v-model="tel"
                    type="number"
                    name="tel"
                    label="手机号"
                    placeholder="手机号"
                    :rules="rules.tel"
                />
                <van-field
                    v-model="email"
                    type="email"
                    name="email"
                    label="邮箱"
                    placeholder="邮箱"
                    :rules="rules.email"
                />
                <van-field
                    v-model="nickname"
                    type="text"
                    name="nickname"
                    label="昵称"
                    placeholder="昵称"
                    :rules="rules.nickname"
                />
                <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">注册</van-button>
                </div>
                </van-form>
                <div class="tologin">
                已有账号，去<router-link to="/my/login">登录</router-link>
                </div>
    </div>
    
</template>

<script>

import { Toast } from 'vant';
import Vue from 'vue';
import { Form } from 'vant';
import { Field } from 'vant';
import {register} from '@/request'

Vue.use(Form);
Vue.use(Field);
Vue.use(Toast);
export default {
    data(){
    return {
        rules: {
        username: [
            {
            required: true,
            message: '账号必填'
            },
            {
            pattern: /^[a-zA-Z]\w{3,9}$/,
            message: '必须字母开头，数字字母下划线组成，4~10位'
            }
        ],
        password: [
            {
            required: true,
            message: '密码必填'
            },
            {
            pattern: /^.{6,12}$/,
            message: '长度在6~12位'
            },
        ],
        repass: [
            {
            required: true,
            message: '确认密码必填'
            },
            {
            validator: this.validator,
            message: '两次密码输入不一致'
            }
        ],
        tel: [
            {
            required: true,
            message: '电话必填'
            },
            {
            pattern: /^1[345789]\d{9}$/,
            message: '请输入正确的手机号'
            }
        ],
        email: [
            {
            required: true,
            message: '请填写密码'
            },
            {
            pattern: /(^[1-9]\d{4,9}@qq\.com$)|(^[a-zA-Z]\w{5,17}@((126|163)\.com|yeah\.net)$)/,
            message: '请输入正确的邮箱地址'
            }
        ],
        nickname: [
            {
            required: true,
            message: '昵称必填'
            },
            {
            pattern: /^[a-zA-Z][a-zA-Z0-9]{3,7}$/,
            message: '昵称字母和数字组成，字母开头，4~8位'
            }
        ]
        },

        username: '',
        password: '',
        repass: '',
        email: '',
        tel: '',
        nickname: ''
        }
    },
    methods: {
            onSubmit(values) {
              //  console.log(values)
                var _this=this
                delete values.repass
                register(values).then(data=>{
                    var {code,msg}=data
                    if(code===1){
                        Toast.fail(msg);
                    }else{
                        Toast.success({
                            message:msg,
                            onClose(){
                                _this.$router.push('login')
                            }
                        });
                    }
                })
           },
        validator(val) {
            // 在这里进行验证，返回true表示通过，返回false表示不通过
            return this.password === this.repass
                }
        }

}
</script>
<style scoped>
.reg{
    text-align: center;
}

</style>